
////////////////////////
// 这里实现标签页的切换
///////////////////////

function iniSwitchTab() {
    // 获取标签页按钮，会话列表吗，好友列表
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // 添加元素存在性检查
    if (!tabSession || !tabFriend) {
        console.error('标签页按钮未找到！');
        return;
    }
    //querySelectAll得到一个数组
    //[0]是会话列表
    //[1]是好友列表
    let lists = document.querySelectorAll('.list')

    //注册点击事件
    tabSession.onclick = function () {
        //被选中状态
        tabSession.style.backgroundImage = 'url(image/会话2.png)';
        //未被选中状态
        tabFriend.style.backgroundImage = 'url(image/用户.png)';

        // 让会话列表显示，好友列表隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function () {
        //未被选中状态
        tabSession.style.backgroundImage = 'url(image/会话.png)';
        //被选中状态
        tabFriend.style.backgroundImage = 'url(image/用户2.png)';

        // 让会话列表隐藏，好友列表显示
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
        getFriendList()
    }
}

iniSwitchTab();



/////////////////////////////
// 从服务器获取到用户登录数据
///////////////////////////

function getUserInfo() {
    $.ajax({
        url: "/user/userInfo",
        type: 'get',
        success: function (ret) {
            if (ret.userId > 0) {
                let userDiv = document.querySelector(".main .left .user")
                userDiv.innerHTML = ret.username;
                //保存当前用户的userId以备后用
                userDiv.setAttribute("user-id", ret.userId)

                // 用户登录成功后，再获取好友请求和会话列表
                getFriendRequest(); // 确保在此处调用
            } else {
                alert("当前用户未登录！")
                location.assign('/login.html')
            }
        }
    })
}

getUserInfo();


//////////////////////////////
///从服务器获取到当前用户的所有好友
//////////////////////////
function getFriendList() {
    $.ajax({
        url: '/friend/friendList',
        type: 'get',
        success: function (ret) {
            //获取ul标签元素
            let friendListUl = document.querySelector('#friend-list')
            //将ul中的内容清空，防止多次请求追加内容
            friendListUl.innerHTML = ''
            //遍历列表中的数据
            for (let friend of ret) {
                //创建li元素
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>'
                //将好友的id属性存放到li标签中以备后用
                li.setAttribute('friend-id', friend.friendId)
                //将li标签加入到ul标签内
                friendListUl.append(li)

                //给每个li标签创建一个点击事件，被点击后创建一个会话
                //点击事件的函数不能有参数
                li.onclick = function () {
                    clickFriend(friend)
                    //console.log('点击后可以看到的friendId：' + friend.friendId + ' friendName: '+friend.friendName)
                }
            }
        },
        error: function () {
            console.log("获取好友列表失败")
        }
    })
}







//////////////////////////////
///获取会话列表
//////////////////////////
function getSessionList() {
    $.ajax({
        url: '/session/sessionList',
        type: 'get',
        success: function (ret) {
            let sessionListUL = document.querySelector('#session-list')
            //先把内容清空防止追加
            sessionListUL.innerHTML = ''

            for (let session of ret) {
                //如果会话列表中最后一条消息的长度大于10则截断(因为宽度是有限的)
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10)
                }

                let li = document.createElement('li')
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>' + '<p>' + session.lastMessage + '</p>'

                //把sessionId保存到li标签中以备使用
                li.setAttribute("message-session-id", session.sessionId)

                sessionListUL.append(li)

                //给每个li标签设置点击事件
                li.onclick = function () {
                    clickSession(li)
                }
            }
        }
    })
}
// 获取会话列表
getSessionList()

// 先获取会话列表再获取好友申请
getFriendRequest()

//li标签点击事件
function clickSession(currentLi) {
    //获取所有session-list下的li标签
    let allLis = document.querySelectorAll('#session-list > li')

    //1.设置高亮
    activeSession(currentLi, allLis)

    //2.获取指定会话的历史消息(右侧消息区的展示)
    let sessionId = currentLi.getAttribute('message-session-id')
    getHistoryMessage(sessionId)

}

// 设置高亮
function activeSession(currentLi, allLis) {
    //遍历所有的li标签找到被点击的那一个
    for (let li of allLis) {
        //只有被点击的才设为高亮显示（selected是我们设置的css样式的名字）
        if (li == currentLi) {
            li.className = 'selected'
        } else {
            li.className = ''
        }
    }
}

// 获取一个会话的历史消息
function getHistoryMessage(sessionId) {
    // 1.分别将右侧聊天区域的标题以及内容全部置为空
    let titleDiv = document.querySelector('.right .title')
    titleDiv.innerHTML = ''
    let messageShowDiv = document.querySelector('.right .message-show')
    messageShowDiv.innerHTML = ''

    //直接找class属性名是selected的标签，如果找不到则表示用户没有点击会话，所以右侧区域也就不显示内容即可
    let selectedH3 = document.querySelector('.left #session-list .selected>h3')
    if (selectedH3) {
        titleDiv.innerHTML =selectedH3.innerHTML
    }

    if (sessionId == null) {
        return
    }
    //3.在右侧区域显示历史消息
    $.ajax({
        type: 'get',
        url: '/message/getMessage?sessionId=' + sessionId,
        success: function (ret) {
            for (let message of ret) {
                //将每条消息展示在消息区域
                addMessage(messageShowDiv, message)
            }
            scrollBottom(messageShowDiv)
        }
    })
}


function addMessage(messageShowDiv, message) {
    //获取当前登录账户的用户名
    let username = document.querySelector('.left .user').innerHTML
    //创建一个消息行用于存放内容
    let messageDiv = document.createElement('div')

    //判断当前消息是谁发的
    if (username == message.fromName) {
        //当前消息是本账号用户发的
        messageDiv.className = 'message message-right'
    } else {
        //当前消息是对方发的
        messageDiv.className = 'message message-left'
    }

    //构造这条消息行
    messageDiv.innerHTML = '<div class="box">' + '<h4>' + message.fromName + '</h4>'
        + '<p>' + message.content + '</p>' + '</div>'

    //将这条消息行加入到消息区域中
    messageShowDiv.append(messageDiv)
}

function scrollBottom(messageShowDiv) {
    //获取messageShowDiv的高度
    let offsetHeight =  messageShowDiv.offsetHeight
    //获取实际内容的高度
    let scrollHeight = messageShowDiv.scrollHeight

    //让messageShowDiv垂直滚动的距离
    //第一个参数是水平滚动，第二个参数是垂直滚动
    messageShowDiv.scrollTo(0, scrollHeight-offsetHeight)
}

//点击好友列表中的好友后进行一些操作
function clickFriend(friend) {
    //1.先判断当前会话在会话列表中是否存在(通过好友的名称来进行判断),如果存在则返回这个会话，否则返回null
    let sessionLi = findSessionByName(friend.friendName)
    if (sessionLi) {
        //2.如果存在则将当前存在的会话选中且置顶
        //先获取父元素
        let sessionListUL = document.querySelector('#session-list')
        //将当前标签插入到数组的第一个位置
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0])

        //点击后当前会话高亮显示，并且右侧显示当前会话的历史消息
        //由于这个会话是一开始就存在的所以它在被创建时就被注册了点击事件
        sessionLi.click() //这是个单击的操作
    } else {
        //3.如果不存在则创建一个新的会话，且将创建后的会话置顶，最后通知服务器保存当前新创建的会话（目的是让服务器对数据进行持久化）

        //创建li标签
        let sessionLi = document.createElement('li')
        //由于新创建的标签还没有发送信息，所以消息预览是空的
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>'
        //发送给服务器
        createSession(friend.friendId, sessionLi)
        //将当前会话置顶
        let sessionListUL = document.querySelector('#session-list')
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0])

        //点击后当前会话高亮显示，并且右侧显示当前会话的历史消息
        sessionLi.onclick = function () {
            clickSession(sessionLi)
        }
        sessionLi.click()


    }
    //4.跳转到会话列表
    let tabSession = document.querySelector('.tab .tab-session')
    //tabSession的Dom元素已经被注册过了点击事件，所以此处给一个单击即可
    tabSession.click()
}

//通过好友的名字在会话列表中查找会话
function findSessionByName(username) {
    let sessionLis =  document.querySelectorAll('#session-list>li')
    for (let sessionLi of sessionLis) {
        let sessionName = sessionLi.querySelector('h3')
        if (sessionName.innerHTML == username) {
            //返回当前会话（li标签）
            return sessionLi
        }
    }
    return null
}

//告知服务器创建了新的会话
function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        //将参数放到了url中，data是放到body中
        url: 'session/addSession?toUserId=' + friendId,
        success: function (ret) {
            console.log('创建会话成功,sessionId = '+ret.sessionId)
            sessionLi.setAttribute('message-session-id', ret.sessionId)
        },
        error: function () {
            console.log("创建会话失败")
        }
    })
}

//////////////////////////////
///实现点击搜索按钮后右侧显示搜索的结果
////////////////////////////
function handleSearch() {

    let search = document.querySelector('.search')
    // 获取搜索按钮
    let searchButton = search.querySelector('button')
    //获取搜索框中的内容
    let searchInput = search.querySelector('input')
    // 获取消息区域
    let messageArea = document.querySelector('.right')
    // 获取搜索区域
    let searchArea = document.querySelector('.search-user-area')
    // 获取会话列表
    let sessionLiUL = document.querySelector('#session-list')

    //如果点击搜索按钮则显示搜索区域，并且将消息区域隐藏
    searchButton.onclick = function () {
        //如果输入框中没有内容
        if (!searchInput.value) {
            alert('请输入内容！')
            return
        }
        searchArea.className = 'search-user-area'
        messageArea.className = 'right hide'
        //向服务器发送请求查询用户
        showSearchUser(searchInput.value)
        // 搜索完成后将输入框中的内容置为空
        searchInput.value = ''
    }

    //如果点击会话列表中的任意一个会话，此时显示相应会话的消息区域，并且将搜索区域隐藏
    sessionLiUL.onclick = function () {
        searchArea.className = 'search-user-area hide'
        messageArea.className = 'right'
    }
}

handleSearch()

function showSearchUser(input) {
    $.ajax({
        type: 'get',
        url: 'user/searchUser?input=' + input,
        success: function (ret) {
            let showUsersDiv = document.querySelector('.user-show')
            //先将这个区域中的内容清空
            showUsersDiv.innerHTML = ''

            //接口中规定后端返回的ret是个集合，但js自动将其转为数组类型
            if (ret.length == 0) {
                alert('查询失败，没有找到相关的用户!')
            } else {
                //遍历列表
                for (let user of ret) {
                    let li = document.createElement('li')
                    //构造li标签里面的内容
                    li.innerHTML = '<h4>' + user.username + '</h4>' +
                        '<input type="text" placeholder="请输入申请理由..."><button>申请</button>'
                    //将userId添加到li标签的属性中,以备后用
                    li.setAttribute('user-id', user.userId)

                    //将这个li标签加入到ul中
                    showUsersDiv.append(li)
                }
            }
        },
        error: function () {
            console.log("[error] 查询用户失败！")
        }
    })
}



////////////////////////////////
//操作websocket
//////////////////////////////


// 创建websocket实例 （每个客户端执行这个代码后都会创建一个当前自己客户端的WebSocketSession）
let webSocket = new WebSocket('ws://'+location.host+'/WebSocketMessage')

webSocket.onopen = function () {
    console.log('websocket 连接成功')
}
webSocket.onclose = function () {
    console.log('websocket 连接关闭')
}
webSocket.onerror = function () {
    console.log('websocket 连接异常')
}
webSocket.onmessage = function (e) {
    console.log('websocket 接收消息成功：' + e.data)
    //将JSON字符串转为js对象
    let resp = JSON.parse(e.data)
    if (resp.type == 'message') {
        //处理消息
        handleMessage(resp)
    } else if (resp.type == 'friendRequest') {
        friendRequest(resp)
    } else if (resp.type == 'delSession') {
        handleDelSession(resp)
    } else if (resp.type == 'delFriend') {
        handleDelFriend(resp)
    } else {
        console.log('客户端resp.type有误！！！')
    }
}

////////////////////////////////
// 处理客户端接收消息的情况
//////////////////////////////
function handleMessage(resp) {
    // 当客户端接收成功来自服务器转发的消息后，前端这时的处理逻辑是：
    // 从resp中的fromId属性获取消息来自于谁， 并且从resp中获取sessionId，
    // 在会话列表中查找是否有li标签属性是sessionId的
    // （必须以sessionId去查找标签而不能使用好友名（fromName）去查找，因为服务器转发消息给客户端的不仅只有好友的信息还有当前自己的信息，
    // 以当前自己的名称去查找标签势必会再创建一个标签，此时就有了一个和自己对话的标签这不是我们想要的结果），

    // 如果不存在则新创建一个li标签，并把sessionId赋值给这个标签（setAttribute）

    // 将这个li标签在会话列表中进行置顶，并且显示它的预览消息以及会话中的好友名称
    // 当选中这个标签时将这个会话中的历史消息展示在右侧
    let sessionLis = document.querySelector('#session-list')
    //根据传过来的resp中的sessionId属性来查找这个标签
    let currentLi = findSessionBySessionId(resp.sessionId)

    // let myselfName = document.querySelector('.user').textContent
    // // 通过resp中的fromName属性来查找是否存在会话
    // let currentLi = findSessionBySessionName(resp.fromName)

    // 如果会话不在则新创建一个li标签
    if (currentLi == null) {
        console.log("[handleMessage]: "+resp)
        //直接给currentLi赋值
        currentLi = document.createElement('li')
        // 虽然服务器中转发的消息也会发给自己的客户端中一份，但是此时这里的的resp.fromName不会是自己的名字，
        // 当我们要给一个好友聊天时，我们需要点击一个好友，此时会创建一个会话，发完消息后会将这个会话的sessionId传给服务器，
        // 服务器处理完消息后再将sessionId包含在响应中发给我们的客户端以及对方的客户端
        // 我们的客户端接收到服务器的响应后，通过sessionId在我们的客户端上是有这个会话的所以不需要再创建，所以也就执行不到这里的代码了
        // 以我们好友的视角来看，他是被动接收消息的，假设在他的客户端上他没有与我们的会话，此时代码会执行currentLi == null的逻辑，
        // 在他的客户端上创建一个会话时 此时的resp.fromName就是我们的名字

        //会话预览中的效果

        // 获取当前登录用户的用户名
        let myselfName = document.querySelector('.user').textContent
        // 消息体中携带的用户名
        let fromName = resp.fromName

        // 如果创建的会话的标题（用户名）和当前登录的用户名相同
        // （处理添加好友成功后发送系统消息导致会话的标题是当前正在登录的用户的用户名）
        if (resp.fromName == myselfName) {
            // 通过sessionId找到当前会话中的另一个用户
            $.ajax({
                type: 'get',
                url: 'session/getFriendBySessionId?sessionId='+resp.sessionId,
                success: function (ret) {
                    // 返回的类型是Friend对象
                    if (ret == null) {
                        console.error("处理发送系统消息时，当前用户的好友不存在！")
                    } else {
                        console.log("处理发送系统消息时，对方用户的用户名："+ret.friendName)
                        fromName = ret.friendName

                        currentLi.innerHTML = '<h3>' + fromName + '</h3>' + '<p></p>'
                        //置顶这个会话 (无论是发送方还是接收方都会将这个会话进行置顶)
                        sessionLis.insertBefore(currentLi, sessionLis.children[0])

                        //处理标签中最后一条消息预览状态下的效果
                        let p = currentLi.querySelector('p')
                        p.innerHTML = resp.content

                        if (p.innerHTML.length > 10) {
                            p.innerHTML = p.innerHTML.substring(0, 10) + '...'
                        }

                        //将sessionId赋值到标签上
                        currentLi.setAttribute('message-session-id', resp.sessionId)
                        // 创建点击事件
                        currentLi.onclick = function () {
                            // clickSession方法可以使这个标签实现高亮且右侧显示历史消息
                            // 但要注意这个方法是指某个会话被点击后才会有的效果，如果不点击则没有效果
                            // 所以这个clickSession虽然可以帮助我们获取右侧的消息，但还要另加处理
                            clickSession(currentLi)
                        }

                        // 我们在右侧聊天区域和对方聊天时，此时也要根据消息的发送在这个窗口中要将消息显示出来并时刻位于最新消息的位置
                        // 上面的给会话注册单击事件只能实现点击后的效果，并不能实现在当前会话的聊天消息区域的实时效果
                        if (currentLi.className == 'selected') {
                            let messageShowDiv = document.querySelector('.right .message-show')
                            addMessage(messageShowDiv, resp)
                            scrollBottom(messageShowDiv)
                        }
                    }
                }
            })
        } else {
            currentLi.innerHTML = '<h3>' + fromName + '</h3>' + '<p></p>'
            //置顶这个会话 (无论是发送方还是接收方都会将这个会话进行置顶)
            sessionLis.insertBefore(currentLi, sessionLis.children[0])

            //处理标签中最后一条消息预览状态下的效果
            let p = currentLi.querySelector('p')
            p.innerHTML = resp.content

            if (p.innerHTML.length > 10) {
                p.innerHTML = p.innerHTML.substring(0, 10) + '...'
            }

            //将sessionId赋值到标签上
            currentLi.setAttribute('message-session-id', resp.sessionId)
            // 创建点击事件
            currentLi.onclick = function () {
                // clickSession方法可以使这个标签实现高亮且右侧显示历史消息
                // 但要注意这个方法是指某个会话被点击后才会有的效果，如果不点击则没有效果
                // 所以这个clickSession虽然可以帮助我们获取右侧的消息，但还要另加处理
                clickSession(currentLi)
            }

            // 我们在右侧聊天区域和对方聊天时，此时也要根据消息的发送在这个窗口中要将消息显示出来并时刻位于最新消息的位置
            // 上面的给会话注册单击事件只能实现点击后的效果，并不能实现在当前会话的聊天消息区域的实时效果
            if (currentLi.className == 'selected') {
                let messageShowDiv = document.querySelector('.right .message-show')
                addMessage(messageShowDiv, resp)
                scrollBottom(messageShowDiv)
            }
        }
    } else {
        // 这个会话在会话列表中存在的情况

        //置顶这个会话 (无论是发送方还是接收方都会将这个会话进行置顶)
        sessionLis.insertBefore(currentLi, sessionLis.children[0])
        //处理标签中最后一条消息预览状态下的效果
        let p = currentLi.querySelector('p')
        p.innerHTML = resp.content

        if (p.innerHTML.length > 10) {
            p.innerHTML = p.innerHTML.substring(0, 10) + '...'
        }

        // 我们在右侧聊天区域和对方聊天时，此时也要根据消息的发送在这个窗口中要将消息显示出来并时刻位于最新消息的位置
        // 上面的给会话注册单击事件只能实现点击后的效果，并不能实现在当前会话的聊天消息区域的实时效果
        if (currentLi.className == 'selected') {
            let messageShowDiv = document.querySelector('.right .message-show')
            addMessage(messageShowDiv, resp)
            scrollBottom(messageShowDiv)
        }
    }
}



//根据sessionId来查找会话列表中的li标签是否存在
function findSessionBySessionId(sessionId) {
    let sessionLis =  document.querySelectorAll('#session-list>li')
    for (let sessionLi of sessionLis) {
        let sessionLiId = sessionLi.getAttribute('message-session-id')
        if (sessionLiId == sessionId) {
            //返回当前会话（li标签）
            return sessionLi
        }
    }
    return null
}

//这个方法实现的是通过点击发送按钮，将输入框中的信息传给相应的会话中(触发websocket)
function initSendButton() {
    //按钮
    let button = document.querySelector('.right .ctrl')
    //输入框
    let messageInput = document.querySelector('.right .message-input')

    //给button注册一个点击事件，当点击这个发送按钮后把输入框消息发给相应的会话
    button.onclick = function () {
        //先获取被选中的这个会话的id
        let sessionLi = document.querySelector('.left #session-list>.selected')
        //有可能当前没有选中的会话
        if (sessionLi == null) {
            return
        }
        let sessionId = sessionLi.getAttribute('message-session-id')

        //判断输入框中是否有内容
        if (!messageInput.value) {
            //如果messageInput.value的值为null或''都会触发
            return
        }

        //构造请求的json字符串
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        }
        //将req对象转换成json格式的字符串
        req = JSON.stringify(req)
        //发送json
        console.log('[websocket] 发送：' + req)
        webSocket.send(req)

        //发送完毕后，清空输入框中的内容
        messageInput.value = ''
    }
}

initSendButton()

//////////////////////////////
///离线用户登录后获取好友请求
//////////////////////////


function getFriendRequest() {
    $.ajax({
        type: 'get',
        url: 'friendRequest/getFriendRequest',
        success: function (ret) {
            // 如果没有好友请求则直接退出函数即可
            if (ret && ret.length > 0) {
                // console.log('进入[getFriendRequest]代码')
                // ret 是数组类型
                for (let resp of ret) {
                    // 校验关键字段是否存在
                    if (resp.fromName && resp.content && resp.fromId) {
                        friendRequest(resp);
                    } else {
                        console.error("服务器返回的好友请求数据不完整:", resp);
                    }
                }
            }

        }
    })
}

// 不能少
getFriendRequest()

////////////////////////////////
// 好友申请
//////////////////////////////

// 在页面初始化时绑定事件（只需一次）
document.addEventListener('DOMContentLoaded', function() {
    // 事件委托到 .user-show 容器
    document.querySelector('.user-show').addEventListener('click', function(e) {
        // 检查点击的是否是按钮
        if (e.target.tagName === 'BUTTON') {
            initFriendRequests(e); // 调用处理函数
        }
    });
});

//通过点击申请来进行请求(触发websocket)
function initFriendRequests(e) {
    // 获取申请按钮的元素
    // let buttons = document.querySelectorAll('.user-show li button')

    let area = e.target
    let button = area.closest('button');
    let li = area.closest('li') // 获取所在列表项
    let input = li.querySelector('input') // 获取对应输入框

    // 输入验证
    if (!input.value.trim()) {
        alert('请输入申请理由！')
        input.focus()
        return
    }

    // 获取用户信息（通过getAttribute）
    let toUserId = li.getAttribute('user-id');

    // 如果该用户已经是好友则不再发送申请
    let friendLis = document.querySelectorAll('#friend-list li')
    for (let li of friendLis) {
        if (li.getAttribute('friend-id') == toUserId) {
            alert('该用户已是您的好友！')
            // 清空输入框
            input.value = '';
            return
        }
    }

    // 获取当前登录用户的用户名和id
    let myself = document.querySelector('.user')
    let myselfName = myself.textContent
    let myselfId = myself.getAttribute('user-id');
    // 获取输入框中的内容
    let content = input.value;

    // 构造js对象
    let req = {
        type: 'friendRequest',
        fromId: myselfId,
        fromName: myselfName,
        content: content,
        toUserId: toUserId
    }
    console.log('发送的请求：'+req)
    // 将js对象转为JSON字符串格式
    req = JSON.stringify(req)
    webSocket.send(req)
    // 清空输入框
    input.value = '';
    // 禁用按钮防止重复提交
    button.disabled = true;
    alert('申请已发送！');
}


// 在会话列表中显示好友请求的样式
function friendRequest(resp) {
    console.log('好友请求：'+resp.fromName+', id：'+resp.fromId)
    // 创建一个用于显示好友请求的标签
    let li = document.createElement('li')
    li.className = 'friend-request'; // 添加统一类名
    // 将fromId赋值给li标签，以备后用
    li.setAttribute('friend-request-id', resp.fromId)

    // 构建双栏布局容器
    let wrapper = document.createElement('div');
    wrapper.className = 'request-wrapper';
    // 用户信息区块
    const userMeta = document.createElement('div');
    userMeta.className = 'user-meta';
    const h3 = document.createElement('h3');
    h3.textContent = resp.fromName;
    const p = document.createElement('p');
    // 处理content的长度
    let content = resp.content;
    if (content.length > 10) {
        content = content.substring(0, 10) +"..."
    }
    p.textContent = content;

    // 操作按钮组
    const actionGroup = document.createElement('div');
    actionGroup.className = 'action-group';

    const agreeBtn = document.createElement('button');
    agreeBtn.className = 'agree-btn';
    agreeBtn.textContent = '同意';

    const rejectBtn = document.createElement('button');
    rejectBtn.className = 'reject-btn';
    rejectBtn.textContent = '拒绝';

    // 创建这个li标签
    // 组合元素
    userMeta.append(h3, p);
    actionGroup.append(agreeBtn, rejectBtn);
    wrapper.append(userMeta, actionGroup);
    li.append(wrapper);

    // 将这个li标签在会话列表中置顶
    const sessionList = document.getElementById('session-list');
    // sessionList.insertBefore(li, sessionList.firstChild);

    if (sessionList) {
        // 确保 session-list 是 <ul> 元素
        if (sessionList.children.length > 0) {
            sessionList.insertBefore(li, sessionList.firstChild);
        } else {
            sessionList.appendChild(li);
        }
    } else {
        console.error("[friendRequest] 会话列表 (#session-list) 未找到！");
    }


    // 添加动画效果
    li.getBoundingClientRect();
    li.style.opacity = 1; // 直接设置透明度，避免 setTimeout 延迟

    // 事件绑定
    agreeBtn.addEventListener('click', () => handleRequest(true, li, resp.fromId, resp.content));
    rejectBtn.addEventListener('click', () => handleRequest(false, li, resp.fromId, resp.content));

}

// 处理用户同意或拒绝的操作
function handleRequest(isAgree, liElement, fromId, content) {
    console.log(`处理好友请求：${fromId} ${isAgree ? '同意' : '拒绝'}`);
    // 添加移除动画
    liElement.style.transition = 'opacity 0.3s';
    liElement.style.opacity = '0';

    // 拼接参数
    let params = new URLSearchParams({
        isAgree: isAgree,
        fromId: fromId,
        content: content
    }).toString();

    $.ajax({
        contentType: 'application/json',
        type: 'get',
        url: `friendRequest/handleRequest?${params}`,
        success: function (ret) {
            if (ret.friendName == null) {
                console.log('拒绝了用户：'+fromId+'的请求')
            } else {
                // 打印日志
                console.log(ret)
                // 将该用户加入到好友列表中
                let friendListUl = document.querySelector('#friend-list')
                //创建li元素
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + ret.friendName + '</h4>'
                //将好友的id属性存放到li标签中以备后用
                li.setAttribute('friend-id', ret.friendId)
                //将li标签加入到ul标签内
                friendListUl.append(li)

                //给li标签创建一个点击事件，被点击后创建一个会话
                li.onclick = function () {
                    clickFriend(ret)
                }
            }
        },
        error: function () {
            console.log('请求失败！')
        }
    })
    // 动画完成后移除元素
    setTimeout(() => liElement.remove(), 300);
}


/////////////////
//右键点击操作
/////////////////

// 删除会话（用户离线/在线都能使用）
function delSession() {
    document.getElementById('session-list').addEventListener('contextmenu', function(event) {
        // 通过 event.target 找到实际点击的 li 元素
        const sessionLi = event.target.closest('li');
        if (!sessionLi) return; // 如果点击的不是 li，直接退出

        // 阻止默认右键菜单
        event.preventDefault();
        const sessionId = sessionLi.getAttribute('message-session-id');

        if (confirm('确定要删除此会话吗？历史消息也会清空！')) {

            // 触发websocket通知当前会话中的另一个用户
            // 先进行websocket转发，否则会话被删除了就无法根据会话查询会话中的另一个用户了
            let session = {
                type: 'delSession',
                sessionId: sessionId
            }
            session = JSON.stringify(session)
            webSocket.send(session)

            // 给服务器发送删除会话的请求
            delSessionBySessionId(sessionId, sessionLi)
        }

    });
}

delSession()

// 根据sessionId在服务器中删除会话以及这个会话中的历史消息
function delSessionBySessionId(sessionId, sessionLi) {

    // 发送请求并处理
    $.ajax({
        type: 'post',
        url: 'session/delSessionBySessionId?sessionId='+sessionId,
        success: function (ret) {
            if (ret > 0) {
                // 删除元素
                if (sessionLi.className == 'selected') {
                    // 将右侧聊天区域置为空
                    let messageShowDiv = document.querySelector('.message-show')
                    messageShowDiv.innerHTML = ''
                    let titleDiv = document.querySelector('.title')
                    titleDiv.innerHTML = ''
                }
                alert('删除会话成功！')
                sessionLi.remove();

            } else {
                alert('删除会话失败！')
            }
        },
        error: function () {
            alert('请求失败！你无法删除这个会话')
        }
    })
}

// websocket 当用户在线时 接收来自服务器的当前会话已经被删除的消息后进行立即移除这个会话元素
function handleDelSession(resp) {
    let sessionLis = document.querySelectorAll('#session-list li')
    for (let sessionLi of sessionLis) {
        let sessionLiId = sessionLi.getAttribute('message-session-id')
        if (sessionLiId == resp.sessionId) {
            let sessionName = sessionLi.querySelector('h3').textContent

            // 提示客户端这个会话被删除
            alert(`${sessionName}会话已经被用户${sessionName}删除`)
            sessionLi.remove();

            // 将右侧聊天区域置为空
            if (sessionLi.className == 'selected') {
                let messageShowDiv = document.querySelector('.message-show')
                messageShowDiv.innerHTML = ''
                let titleDiv = document.querySelector('.title')
                titleDiv.innerHTML = ''
            }

        }
    }
}

// 删除好友 触发websocket
function delFriend() {
    document.getElementById('friend-list').addEventListener('contextmenu', function(event) {
        // 通过 event.target 找到实际点击的 li 元素
        const friendLi = event.target.closest('li');
        if (!friendLi) return; // 如果点击的不是 li，直接退出

        // 阻止默认右键菜单
        event.preventDefault();
        // 获取好友的id
        const friendId = friendLi.getAttribute('friend-id');
        let friendName = friendLi.querySelector('h4').textContent

        // 获取当前用户的id
        let userDiv = document.querySelector('.user')
        let username = userDiv.textContent
        let userId = userDiv.getAttribute('user-id')
        if (confirm(`确定要删除好友${friendName}吗?你们的会话也会被删除！`)) {
            // 触发websocket通知当前会话中的另一个用户
            // 先进行websocket转发，否则好友被删除了就无法执行这个通知操作了
            let friend = {
                type: 'delFriend',
                friendId: friendId,
                userId: userId,
                username: username
            }
            friend = JSON.stringify(friend)
            webSocket.send(friend)

            // 给服务器发送删除请求删除数据库中的记录
            $.ajax({
                type: 'post',
                url: '/friend/delFriend',
                data: {
                    friendId: friendId
                },
                success: function (ret) {
                    if (ret > 0) {
                        alert("删除好友成功!")
                        friendLi.remove()

                        // 好友删除成功后还要删除和这个好友的会话
                        // 先查找会话中是否有这个好友的会话
                        let sessionLi = findSessionByName(friendName)

                        if (sessionLi) {
                            console.log('找到了和这个好友的会话，会话id：'+sessionLi.getAttribute('message-session-id'))
                            // 如果找到了这个会话则删除这个会话
                            let sessionId = sessionLi.getAttribute('message-session-id')
                            delSessionBySessionId(sessionId, sessionLi)
                        }
                    } else {
                        alert('删除好友失败！')
                    }
                },
                error: function () {
                    alert('删除遇到错误！')
                }
            })
        }
    })
}

delFriend()

// 处理被删除用户在线时的操作
function handleDelFriend(resp) {
    console.log("被删除好友的id："+resp.friendId)
    // 删除他们的会话 根据好友的名称
    // 先查找是否存在这个好友的会话
    let sessionLi = findSessionByName(resp.username)
    if (sessionLi) {
        console.log('找到了和这个好友的会话，会话id：'+sessionLi.getAttribute('message-session-id'))
        // 如果找到了这个会话则删除这个会话
        // 无需再通过http删除数据库中的会话，因为删除当前用户的那个用户已经将会话删除了

        // 如果当前会话被选中的情况下
        if (sessionLi.className == 'selected') {
            // 将右侧聊天区域置为空
            let messageShowDiv = document.querySelector('.message-show')
            messageShowDiv.innerHTML = ''
            let titleDiv = document.querySelector('.title')
            titleDiv.innerHTML = ''
        }
        sessionLi.remove();
    }

    // 删除好友标签
    let friendLis = document.querySelectorAll('#friend-list')
    for (let friendLi of friendLis) {
        let friendId = friendLi.getAttribute('friend-id')
        // 如果找到了删除当前用户的指定的好友标签
        if (friendId == resp.userId) {
            friendId.remove()
        }
    }
    // 测试
    alert(`你已经被用户${resp.username}删除！`)
}